<template>
  <el-form label-width="120px" :model="data" ref="formRef" :rules="rules">
    <el-form-item label="邮箱" prop="email">
      <el-input
        v-model="data.email"
        placeholder="请输入邮箱(作为登录使用，注册后不可更改)"
      ></el-input>
    </el-form-item>
    <el-form-item label="用户名" prop="name">
      <el-input v-model="data.name" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        v-model="data.password"
        type="password"
        placeholder="请输入密码"
      ></el-input>
    </el-form-item>
    <el-form-item label="头像" prop="avatar">
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8080/api/upload"
        list-type="picture-card"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img
          v-if="data.avatar"
          :src="data.avatar"
          style="width: 100%; height: 100%"
          alt=""
        />
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>

    <el-form-item label="个人简介" prop="bio">
      <el-input
        v-model="data.bio"
        type="textarea"
        placeholder="请输入个人简介"
      ></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submit">注册</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { register } from "@/api/users";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
const formRef = ref(null);
const emits = defineEmits(["close"]);
const data = ref({
  email: "",
  password: "",
  name: "",
  avatar: "",
  bio: "",
});

const rules = {
  name: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
  ],

  avatar: [{ required: true, message: "请上传头像", trigger: "blur" }],

  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱", trigger: ["blur", "change"] },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
};
const handleAvatarSuccess = (response, file) => {
  data.value.avatar = "http://localhost:8080/" + response.data;
  ElMessage.success("上传成功");
};
const submit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm(
        `是否确认使用 ${data.value.email} 注册？此账号将作为唯一登录名使用，不可修改`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          await register({
            avatar: data.value.avatar,
            bio: data.value.bio,
            email: data.value.email,
            password: data.value.password,
            username: data.value.name,
          });
          ElMessageBox.alert("恭喜你注册成功", "提示").then(() => {
            data.value = {};
            emits("close");
          });
        })
        .catch(() => {
          console.log("取消注册！");
        });
    } else {
      return false;
    }
  });
};
</script>
